@{
    Layout = "_LayoutAndSidebar";
}



<style>
    .page {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow: hidden;
        margin-bottom: unset !important;
    }

    .page-lay-content {
        flex: 1;
        min-height: 100px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: rgba(128, 128, 128, 0.06);
        backdrop-filter: blur(12px);
        box-sizing: border-box;
        padding: 4px 0px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }


    .page-msg-name {
        font-size: 12px;
        color: #07C160;
    }

        .page-msg-name.page-msg-selfsend {
            color: #0d3ad6;
        }

    .page-msg-time {
        font-size: 12px;
        color: #ccc;
    }

    .page-lay-send {
        height: 50px;
    }

    .page-msg {
        background-color: #efefef;
        padding: 0px 12px;
    }

        .page-msg.page-msg-selfsend {
            background-color: unset;
        }
</style>


<div class="box page">
    <h3 class="title is-4">消息中心</h3>
    @{
        if (ViewBag.ShowTip)
        {
            <article class="message is-warning">
                <div class="message-body">
                    <h5 class="title is-5">
                        <span class="icon has-text-warning">
                            <i class="fas fa-exclamation-triangle"></i>
                        </span>
                        <span>
                            没有可用服务
                        </span>
                    </h5>
                    <p>
                        您还没有业务, 无法为您提供完整服务. 您可以前往 业务中心 添加
                        <a href="/Work/SupplierList">[货源业务]</a>
                        或
                        <a href="/Work/FactoryList">[工厂业务]</a> 后享受完整功能.
                    </p>
                </div>
            </article>
        }
    }
    <div class="page-lay-content" id="message_view">
    </div>
    <div class="page-lay-send">
        <div class="field has-addons">
            <div class="control" style="flex: 1;">
                <input id="message_input" class="input" type="text" placeholder="消息管理员可见">
            </div>
            <div class="control">
                <button class="button is-rounded" id="send_message">
                    <span class="icon">
                        <i class="fa-regular fa-paper-plane"></i>
                    </span>
                    <span>
                        发送
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>


<script>
    let E_sendMessage = document.getElementById('send_message');
    let E_messageView = document.getElementById('message_view');
    let E_messageInput = document.getElementById('message_input');

    let messageSign = null;

    function appendMessage(msgData, isMe) {
        const msgHtml =
            `<div class="page-msg ${isMe ? "page-msg-selfsend" : ""}">
                                        <span class="page-msg-name ${isMe ? "page-msg-selfsend" : ""}">${isMe ? "我" : msgData.fkSendUserId}</span>
                                        <span class="page-msg-time">${msgData.sendTime}</span>
                                        <div class="page-msg-content">
                                            <p class="bubble-left">
                                                <span>${msgData.messageData}</span>
                                            </p>
                                        </div>
                                    </div>`;

        E_messageView.innerHTML += msgHtml;
        E_messageView.scrollTop = E_messageView.scrollHeight;
    }

    function updateChatMessage(chatData) {
        E_messageView.innerHTML = '';

        const sender = chatData.sender;
        const chats = chatData.messages;
        chats.forEach(chat => {
            appendMessage(chat, sender === chat.fkSendUserId);
        });
    }

    function updateMessageData(okcallback) {
        $.ajax({
            url: '/UserApi/GetMessage',
            type: 'get',
            success: function (res) {
                if (res.code === 0) {
                    updateChatMessage(res.data);
                    okcallback();
                } else {
                    console.log("获取消息失败", res.msg);
                }
            },
        });
    }

    function checkAndUpdateMessage() {
        $.ajax({
            url: '/UserApi/GetMessageSign',
            type: 'get',
            success: function (res) {
                if (res.code === 0) {
                    if (messageSign !== res.data) {
                        console.log("消息有更新");
                        updateMessageData(() => {
                            messageSign = res.data;
                        });
                    }
                } else {
                    alert(res.msg);
                }
            },
        });
    }

    setInterval(checkAndUpdateMessage, 1000);
    checkAndUpdateMessage();

    E_sendMessage.addEventListener('click', function () {
        this.blur();

        const msg = E_messageInput.value;
        if (!msg) {
            alert('请输入消息内容');
            return;
        }
        let targetUserId = 1;

        E_sendMessage.classList.add('is-loading');
        $.ajax({
            url: '/UserApi/SendMessage',
            type: 'post',
            data: {
                MessageData: msg,
                TargetUserId: targetUserId
            },
            success: function (res) {
                if (res.code === 0) {
                    E_messageInput.value = '';
                    checkAndUpdateMessage()
                } else {
                    alert("发送失败:" + res.msg);
                }
            },
            complete: function () {
                E_sendMessage.classList.remove('is-loading');
            }
        });

    });

    E_messageInput.addEventListener('keydown', function (e) {
        if (e.keyCode === 13) {
            E_sendMessage.click();
        }
    });
</script>